import React from 'react';
import { Menu, Icon, Button } from 'antd';
import { Link, withRouter } from 'react-router-dom';
import collapseLogo from '../../assets/images/collapse-logo.png';
import logo from '../../assets/images/logo.png';

const SubMenu = Menu.SubMenu;

class NavLeft extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      currentKey: '2',
    }
  }

  handleMenuClick = ({item, key}) => {
    const { onMenuClick } = this.props;
    this.setState({
      currentSelectedKeys: [key]
    }, () => {
      onMenuClick && onMenuClick(key);
    });
  }

  updateCurrentSelected = (key) => {
    this.setState({
      currentSelectedKeys: [key]
    });
  }

  // 菜单渲染
  renderMenu =(data)=>{
    return data.map((item)=>{
      if(item.children){
        return (
          <SubMenu title={<span><Icon type={item.iconType} /><span>{item.title}</span></span>} key={item.key}>
            { this.renderMenu(item.children) }
          </SubMenu>
        )
      }
      return <Menu.Item title={item.title} key={item.key}>
        <Link to={item.path} replace>
          <Icon type={item.iconType} />
          <span>{item.title}</span>
        </Link>
      </Menu.Item>
    })
  }

  componentDidMount() {
    const { pathname } = this.props;
    this.setState({
      currentSelectedKeys: [pathname]
    });
    // const pathname = this.props.location.pathname;
    // this.setState({
    //   currentSelectedKeys: [pathname]
    // });
    // console.log(this.context);
  }

  render() {
    const { currentKey } = this.state;
    const { collapsed, onToggleCollapse, menuConfig=[] } = this.props;
    return (
      <div>
        <div className="layout-logo">
{/*          <img src={collapsed ? collapseLogo : logo}/>
*/}        </div>
        <Menu
          defaultSelectedKeys={[currentKey]}
          defaultSelectedKeys={this.state.currentSelectedKeys}
          selectedKeys={this.state.currentSelectedKeys}
          defaultOpenKeys={['sub1']}
          mode="inline"
          theme="dark"
          onClick={this.handleMenuClick}
          inlineCollapsed={collapsed}
        >
          {this.renderMenu(menuConfig)}
        </Menu>
{/*        <div className="toggle-collapse-action" onClick={onToggleCollapse}>
          <Icon type={collapsed ? 'right' : 'left'} />
        </div>*/}
      </div>
    );
  }
}

export default NavLeft;
